<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <link rel="stylesheet" th:href="@{/css/jquery-ui.css}" >
    <style>
        .ui-autocomplete-loading { background: white url('/img/loader.gif') right center no-repeat; }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 3px;

            font-size:11px;
            line-height: 12px;
        }
        /* IE 6 doesn't support max-height
         * we use height instead, but this forces the menu to always be this tall
         */
        * html .ui-autocomplete {
            height: 200px;
        }
    </style>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar">
            <div th:replace="admin/admin-common::admin-navbar"></div>
            <div class="content" style="padding:3px 3px 3px 3px;">
                <div class="data-title">
                    <h3 th:text="${contest.title}"></h3>
                    Start Time:<span th:text="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    &nbsp;&nbsp;End Time:<span th:text="${#dates.format(contest.end_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    <br/>
                </div>
                <div class="roundbox">
                    <table class="problem rtable">
                        <tr class="header">
                            <th class="id left-item">[[#{problemid}]]</th>
                            <th class="title">
                                <div style="float:left;">[[#{problem}]]</div>
                                <div style="float:right;font-size:11px;padding-top:1px;text-align:right;color: grey;">
                                    Title at Contest
                                </div>
                            </th>
                            <th class="point" th:if="${contest.type!=0}">[[#{point}]]</th>
                            <th class=""></th>
                        </tr>
                        <tr th:if="${problems.size == 0}"><td class="left-item dark" colspan="15" style="text-align: left;">There is no records.</td></tr>
                        <tr th:each="problem,stat : ${problems}" th:class="${stat.odd}?'dark'">
                            <td class="id left-item"><a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.num}"></a></td>
                            <td class="title" style="text-align: left;word-wrap:break-word;">
                                <div style="float:left;">
                                    <a th:href="'/admin/problemset/problem/' + ${problem.problem_id}" th:text="${problem.problem_id}"></a>
                                </div>
                                <div style="float:right;font-size:11px;padding-top:1px;text-align:right;color: grey;">
                                    <a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.title}"></a>
                                </div>
                            </td>
                            <td class="point" th:if="${contest.type!=0}" th:text="${problem.point} + 'pt'"></td>
                            <td class="" >
                                <a th:href="@{/admin/contest/{contestId}/problem/{num}/delete(contestId=${problem.contest_id},num=${problem.num})}">Delete</a>
                                |<a th:href="@{/admin/contest/{contestId}/problem/{num}/judge(contestId=${problem.contest_id},num=${problem.num})}">ReJudge</a>
                            </td>
                        </tr>
                        <form  class="contest-add-problem" action="" method="post">
                            <tr>
                                <td class="id left-item">
                                    <span style="color:grey" th:utext="${idleNum}"></span>
                                    <input type="hidden" id="num" name="num" th:value="${idleNum}"/>
                                    <input type="hidden" id="contestId" name="contestId" th:value="${contest.contest_id}"/>
                                    <input type="hidden" th:if="${contest.type==0}" id="point" name="point" value="1">
                                </td>
                                <td class="title" style="text-align: left;word-wrap:break-word;">
                                    <div class="add-problem" style="float:left;">
                                        <input type="text"  style="width: 68px; height: 18px;" id="problemId" name="problemId" placeholder="PID">(Problem ID. or Title)
                                    </div>
                                    <div style="float:right;font-size:11px;padding-top:1px;text-align:right;">
                                        <input type="text" style="width: 228px;" id="title" name="title" placeholder="Title display at contest." th:value="'Problem ' + ${idleNum}">
                                    </div>
                                </td>
                                <td class="point" th:if="${contest.type!=0}">
                                    <input type="text" style="width: 50px;" id="point" name="point" value="1">
                                </td>
                                <td class="ratio">
                                    <input type="submit" value="Add Problem">
                                </td>
                            </tr>
                        </form>
                        <tr>
                            <td colspan="4"><span class="fielderror"></span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="sidebar" >
            <div class="sidebox roundbox">
                <div class="top-link" style="border-bottom: 1px solid #b9b9b9;">
                    <div class="title-sidebox" style="width: 100%">[[#{sidebar.infobox}]]</div>
                </div>
                <div class="" style="margin: 6px;font-size: 12px;word-wrap:break-word;">
                    <pre th:utext="${contest.description}">
                    </pre>
                </div>
            </div>
            <div class="sidebox roundbox ">
                <div class="top-link">
                    <div class="title-sidebox">
                        <div class="title-sidebox">Tools Box</div>
                    </div>
                </div>
                <div class="top10" style="margin: 6px;">
                    <b><a th:href="@{/admin/contest/edit/{contestId}(contestId=${contest.contest_id})}">[[#{contestedit}]]</a></b>
                </div>
                <div class="bottom-link">
                </div>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>


<script th:src="@{/js/jquery-ui.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var cache = {},
            lastXhr;
        $( ".add-problem input" ).autocomplete({
            delay: 300,
            width:100,
            minLength: 1,
            selectFirst: false,
            matchSubset:true,
            matchContains: true,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( $.map( cache[ term ], function( item ) {
                        return {
                            label: item.problem_id+"."+item.title,
                            value: item.problem_id
                        }
                    }));
                    return;
                }
                lastXhr = $.getJSON( "/api/admin/problem/search", {search:request.term} , function( data, status, xhr ) {
                    cache[ term ] = data.data;
                    response( $.map( data.data, function( item ) {
                        return {
                            label: item.problem_id+"."+item.title,
                            value: item.problem_id
                        }
                    }));
                    if ( xhr === lastXhr ) {
                        response( $.map( data.data, function( item ) {
                            return {
                                label: item.problem_id+"."+item.title,
                                value: item.problem_id
                            }
                        }));
                    }
                });
            }
        });

        var formAddProblemSubmitListener = function () {
            var problemId = document.getElementById('problemId').value;
            var contestId = document.getElementById('contestId').value;
            var num = document.getElementById('num').value;
            var title = document.getElementById('title').value;
            var point = document.getElementById('point').value;
            postForm = function () {
                var formData = {
                    "contest_id":contestId,
                    "problem_id":problemId,
                    "num":num,
                    "title":title,
                    "point":point,
                }
                console.log(formData)
                $.ajax({
                    type : "post",
                    url : "/api/admin/contest/problem/add",
                    data : JSON.stringify(formData),
                    contentType:"application/json",
                    dataType : "json",
                    success : function(data) {
                        if (data.code != 200) {
                            $(".fielderror").html(data.msg);
                            return;
                        }

                        $('input[type=submit]', this).attr('disabled', 'disabled');
                        $('.button_submit').attr('disabled', 'disabled');
                        window.location.href="/admin/contest/" + contestId;
                    }
                });
            };
            postForm();
            return false;
        }

        $(".contest-add-problem").submit(formAddProblemSubmitListener);
    });
</script>
</body>
</html>